<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <table id="tab">

    </table>
</div>


<script th:src="@{${'/js/mustache.js'}}" src="/js/mustache.js" type="text/javascript"></script>
<script th:src="@{${'/js/vue.js'}}" src="/js/vue.js" type="text/javascript"></script>
<script id="myTemplate" type="x-tmpl-mustache">
    <tr>
        <td>{{id}}</td>
        <td>{{name}}</td>
        <td>{{pid}}</td>
    </tr>
</script>
<script>
    // var oReq = new XMLHttpRequest();
    // oReq.addEventListener("success", function (data) {
    //     debugger;
    //     console.log(data);
    // });
    // oReq.open("GET", "/dept/get");
    // oReq.send();

    var xhr = new XMLHttpRequest();
    //使用HTTP POST请求与服务器交互数据
    xhr.open("GET", "/dept/get");
    //设置发送数据的请求格式
    xhr.setRequestHeader('content-type', 'application/json');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            //根据服务器的响应内容格式处理响应结果
            if(xhr.getResponseHeader('content-type')==='application/json'){
                var result = JSON.parse(xhr.responseText);
                var tab = "";     //模板拼接
                var template = document.getElementById("myTemplate").innerHTML;
                for (var i in result){
                    tab+=Mustache.render(template, result[i]);
                }
                document.getElementById("tab").innerHTML=(tab);

            } else {
                console.log(xhr.responseText);
            }
        }
    };
    var sendData = {};
    //将用户输入值序列化成字符串
    xhr.send(JSON.stringify(sendData));



</script>
</body>
</html>